import React from 'react';
import {connect} from 'dva'
import { Button, Select, Table, Pagination, DatePicker, Radio, Checkbox } from 'antd';
import { VtxModal, VtxMap, VtxGrid } from 'vtx-ui';
import styles from './ChartView.less';
import { NAME_SPACE, peo, car, Options, ChartSearchParams } from './config';
import moment from 'moment'
import LineChart from './Chart'

const Option = Select.Option
const {RangePicker} = DatePicker

const Index = ({dispatch, collectionAmountStatistics}) => {
  
  const {
    searchChartObj,
    mode,
    chartSearchParams,
    // 人员名单
    userList,
    // 车辆列表
    carList,
    chartDataList,
    chartTimeList,
    diagramVisable,
  } = collectionAmountStatistics

  // 日期处理
  const getMomentDate = (dateString) => {
    if (!dateString) return "";
    return moment(dateString);
  }

  const gridProps = {
    titles: searchChartObj == 1 ? ['查询对象', '统计方式', '作业人员', '查询时间', '指标选取'] : ['查询对象', '统计方式', '车牌号', '查询时间', '指标选取'],
    gridweight: [1,1,2,2,4],
    showAll: true,
    hiddenMoreButtion: true,
    // 点击确定
    confirm: () => {
      dispatch({
        type: `${NAME_SPACE}/curveView`,
        payload: {}
      })
    },
    // 重置
    clear: () => {
      dispatch({
        type: `${NAME_SPACE}/updateState`,
        payload: {
          chartSearchParams: {...ChartSearchParams}
        }
      })
    },
  }

  // 改变查询对象
  const changeType = (value) => {
    dispatch({
      type: `${NAME_SPACE}/updateState`,
      payload: {
        searchChartObj: value
      }
    })
    dispatch({
      type: `${NAME_SPACE}/updateSubState`,
      payload: {
        sub: 'chartSearchParams',
        data: {
          queryObject: value,
          carIdList: [],
          userIdList: [],
          indexList:[],
        }
      }
    })
  }

  // 改变统计方式
  const changeNum = (value) => {
    dispatch({
      type: `${NAME_SPACE}/updateState`,
      payload: {
        mode: value
      }
    })
    dispatch({
      type: `${NAME_SPACE}/updateSubState`,
      payload: {
        sub: 'chartSearchParams',
        data: {
          statistics: value,
          carIdList: [],
          userIdList: [],
          indexList:[],
        }
      }
    })
  }

  // 查询条件改变
  const changeNumValue = (name, value) => {
    if(mode == 2){
      if(value.length>4){
        // message.warning('最多选4个')
        dispatch({
          type: `${NAME_SPACE}/updateSubState`,
          payload: {
            sub: 'chartSearchParams',
            data: {
              [name]: value.slice(0,4)
            }
          }
        })
      }else{
        dispatch({
          type: `${NAME_SPACE}/updateSubState`,
          payload: {
            sub: 'chartSearchParams',
            data: {
              [name]: value
            }
          }
        })
      }
    }else{
      dispatch({
        type: `${NAME_SPACE}/updateSubState`,
        payload: {
          sub: 'chartSearchParams',
          data: {
            [name]: [value]
          }
        }
      })
    }
  }

  const datePorps = {
    style: {width: '100%'},
    format: "YYYY-MM-DD",
    onChange: (dateMoment, dateStr) => {
        dispatch({
            type: `${NAME_SPACE}/updateSubState`,
            payload: {
                sub: 'chartSearchParams',
                data: {
                  startTime: moment(dateStr[0]).startOf('day').format('YYYY-MM-DD HH:mm:ss'),
                  endTime: moment(dateStr[1]).endOf('day').format('YYYY-MM-DD HH:mm:ss')
                }
            }
        });
    },
    value: [getMomentDate(chartSearchParams.startTime), getMomentDate(chartSearchParams.endTime)],
  }

  const onChongeRadio = (value) => {
    // console.log(value)
    dispatch({
      type: `${NAME_SPACE}/updateSubState`,
      payload: {
        sub: 'chartSearchParams',
        data: {
          indexList: [value]
        }
      }
    })
  }
  const onChangeCheck = (value) => {
    // console.log(value)
    dispatch({
      type: `${NAME_SPACE}/updateSubState`,
      payload: {
        sub: 'chartSearchParams',
        data: {
          indexList: value
        }
      }
    })
  }

  const chartProps = {
    dispatch,
    chartDataList,
    chartTimeList,
  }

  return (
    <div className={styles.normal}>
      <div className={styles.searchWarp}>
        <VtxGrid {...gridProps}>
          <Select
             style={{width: '100%'}}
             value={chartSearchParams.queryObject}
             onChange={(value) => {changeType(value)}}
          >
            <Option value={1}>作业人员</Option>
            <Option value={2}>车牌号</Option>
          </Select>
          <Select
             style={{width: '100%'}}
             value={chartSearchParams.statistics}
             onChange={(value) => {changeNum(value)}}
          >
            <Option value={2}>单一指标</Option>
            <Option value={1}>单一对像</Option>
          </Select>
          {
            searchChartObj==1?
              <Select
                value={chartSearchParams.userIdList}
                onChange={(value) => {changeNumValue( 'userIdList',value)}}
                showSearch
                allowClear
                optionFilterProp={'children'}
                style={{width: '100%'}}
                mode={mode == 2 ? 'multiple':''}
                maxTagCount={4}
              >
                {
                  Array.isArray(userList)?
                    userList.map((item,index) => {
                      return(
                        <Option value={item.userId} key={index}>{item.userName}</Option>
                      )
                    })
                  :''
                }
              </Select>
            :
              <Select
                value={chartSearchParams.carIdList}
                onChange={(value) => {changeNumValue( 'carIdList', value)}}
                showSearch
                allowClear
                optionFilterProp={'children'}
                style={{width: '100%'}}
                mode={mode == 2 ? 'multiple':''}
                maxTagCount={4}
              >
                {
                  Array.isArray(carList)?
                    carList.map((item,index) => {
                      return(
                        <Option value={item.id} key={index}>{item.carNum}</Option>
                      )
                    })
                  :''
                }
              </Select>
          }
          <RangePicker {...datePorps}/>
          {
            mode == 2?
              <Radio.Group 
                onChange={(e) => {onChongeRadio(e.target.value)}} 
                value={chartSearchParams.indexList[0]}
              >
                <Radio value={'1'}>医疗机构收集个数</Radio>
                <Radio value={'2'}>医废收集桶数</Radio>
                <Radio value={'3'}>医废收集重量</Radio>
              </Radio.Group>
            : 
              <Checkbox.Group options={Options} value={chartSearchParams.indexList} onChange={(value) => {onChangeCheck(value)}}/>
          }
        </VtxGrid>
      </div>
      {/* charts图 */}
      <div className={styles.chart} style={{height: document.documentElement.clientHeight - 200}}>
        {
          diagramVisable? 
            <LineChart {...chartProps}/>
          :''
        }
      </div>
    </div>
  )
}

export default connect(state => state)(Index)